import React from 'react'
import {useNavigate} from 'react-router-dom'
import './index.css'
import { Col, Row ,Input} from 'antd'
import {LeftOutlined,RightOutlined} from '@ant-design/icons'
import axios from 'axios'

export default function Header() {
  const { Search } = Input;
  const navigate=useNavigate()
  function PageBack(){
    navigate(-1);
  }
  function PageForward(){
    navigate(1);
  }
  function searchList(key){
    let url=`http://localhost:3200/getSearchByKey?key=${key}&limit=20`
    axios.get(url).then(
      res=>{
        console.log(res.data.response.data.song.list);
        navigate('/songlist',{
          state:{
            lists:res.data.response.data.song.list
          }
        })
      }
    )

  }
  return (
    <>
     <Row>
      <Col span={16}>
      <LeftOutlined onClick={PageBack} style={{fontSize:'25px',marginRight:'20px'}}/>
      <RightOutlined onClick={PageForward} style={{fontSize:'25px',marginRight:'20px'}}/>
      <Search size='large' className='search' placeholder="搜索音乐" allowClear style={{ width: 300 }} onSearch={searchList}/>
      </Col>
      <Col span={2} offset={6}>
        登录|注册
      </Col>
    </Row>
    </>
  )
}
